<template>
	<view class="Mcolor">
		<view class="ma-3">

			<u-search @blur="search" :show-action="false" shape="square" placeholder="请输入项目名称"
				bg-color="#ffffff"></u-search>
		</view>


		<view class="uni-container">
			<u-action-sheet @close="close" :show="show5">

				<TotalReportDetail :title="title" :onClose="close" :onAddReprots="addReports" :content="content"
					:type="type" :id="id" :isWatch="true">
				</TotalReportDetail>
			</u-action-sheet>
		</view>
		<view class="uni-container">
			<u-action-sheet :show="show6" @close="close">

				<AddTotalReportDetail :updateReport="addReports" :onAddReprots="addReports" :onClose="close">
				</AddTotalReportDetail>
			</u-action-sheet>
		</view>

		<view style="margin: 10px 7px 0px 7px;">
			<u-row gutter="10px">
				<u-col span="6">
					<u-button type="primary" size="mini" @click="openDepart()">选择部门</u-button>
				</u-col>
				<u-col span="6">
					<u-button type="primary" size="mini" @click="addReport()">新增报告</u-button>
				</u-col>

			</u-row>
			<u-row gutter="10px">

				<u-col span="6">
					<view class="noback">
						&nbsp;
					</view>
				</u-col>

			</u-row>
			<u-row gutter="10px" style="margin-top: 10px;">
				<u-col span="12">
					<view class="datetimePicker">
						<uni-datetime-picker v-model="myDate" type="daterange" @change="dateChange" />
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="uni-ma-3">
							<button type="warn" size="mini" @click="closeDrawer('showRight')">关闭</button>
						</view>
						<view class="info-content">
							<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
								defaultExpandAll showCheckbox @change="handleTreeChange"></DaTree>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
		<view style="margin: 15px 7px 0px 7px;border: 2px solid #d6d7d9;" :type="list.type">
			<u-row gutter="10px">
				<u-col span="4">
					<view class="amount">总报告:{{ port.sum }}</view>
				</u-col>
				<u-col span="4">
					<view class="amount">年报:{{ port.year }}</view>
				</u-col>
				<u-col span="4">
					<view class="amount">季报:{{ port.season }}</view>
				</u-col>
			</u-row>
			<u-row gutter="10px">
				<u-col span="4">
					<view class="amount">月报:{{ port.month }}</view>
				</u-col>
				<u-col span="4">
					<view class="amount">周报:{{ port.week }}</view>
				</u-col>
				<u-col span="4">
					<view class="amount">日报:{{ port.day }}</view>
				</u-col>
			</u-row>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" show-scrollbar="true" :style="{ maxHeight: height + 'px' }">
				<uni-list :border="true">
					<uni-list-chat class="note-container" v-for="item in list.data" clickable :avatarShow="false"
						:title="item.user.name" :note="item.title" @click="showActionSheet(item)">

						<view style="display: flex;">
							<view>

								<text class="sn">{{ item.createTime  }}</text>
								<view class="chat-custom-right">
									<text class="ck">查看内容</text>
								</view>
							</view>

							<view style="margin-left: 5px;">
								<u-button type="error" @click="del(item)">删除</u-button>
							</view>
						</view>

					</uni-list-chat>
				</uni-list>
			</scroll-view>
		</view>
		<view style="padding: 3px 10px 0px 10px;">
			<uni-pagination title="标题文字" :value="current" :total="list.total" :pageSize="list.pageSize"
				@change="pageChange"></uni-pagination>
		</view>
	</view>

</template>
<script setup>
	import DaTree from '@/components/da-tree/index.vue'
	import BiaofunDatetimePicker from "@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	import {
		formatDate
	} from '@/utils/dateUtil.js'
	import {
		ref,
		inject,
		reactive,
		watch,
		onMounted,
		defineProps,
		provide
	} from 'vue';
	import TotalReportDetail from "@/pages/total-report/components/total-report-detail/total-report-detail.vue"
	import AddTotalReportDetail from "@/pages/total-report/components/total-report-detail/add-total-report-detail.vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	provide('addReports', addReports);
	const http = inject("$http");
	const showRight = ref();
	const params = ref({

		page: 1,
		size: 6
	})
	const roomTreeData = ref([]);
	const allsubmitkeys = ref([]);
	const loading = ref(false);
	const show1 = ref(false);
	const show2 = ref(false);
	const show3 = ref(false);
	const show4 = ref(false);
	const show5 = ref(false);
	const show6 = ref(false);

	const value1 = ref(Date.now());
	const value2 = ref(Date.now());
	const value3 = reactive({
		title: "",
		content: "",
		type: "",
		id: "",
		deleImgSt: ""
	})
	const value4 = reactive({
		title: "",
		content: "",
		type: "",

	})
	const myDate = ref([]);
	const serch = ref();
	const current = ref(1);
	const content = ref("");
	const title = ref("");
	const id = ref("");
	const type = ref("0");

	const query = reactive({
		name: "",
		page: 1,
		size: 10,
		id: "",
		startTime: "",
		endTime: "",
		types: "",
		content: "",
	})

	const port = reactive({
		day: 0,
		week: 0,
		season: 0,
		month: 0,
		year: 0,
		sum: 0
	})
	const searchValue = ref();
	const list = reactive({
		data: [],
		total: 0,
		pageSize: 10,
	})
	const height = parseInt(uni.getSystemInfoSync().windowHeight * 0.62);
	onLoad((options) => {
		title.value = options.title;
		content.value = options.content;
		type.value = options.type;
		console.log(options);
	})
	onMounted(() => {
		getData()
		getport();
	})

	defineProps({
		onClose: {
			type: Function,
			required: true
		},
		onAddReprots: {
			type: Function,
			required: true
		}
	});
	//删除
	function del(item) {
		console.log('id', item);
		uni.showModal({
			title: '提示',
			content: '是否删除',
			success: function(but) {
				if (but.confirm) {
					console.log('用户点击确定', item.id);
					http.post("/zrReport/del", {
						id: item.id
					}).then((res) => {
						console.log("开始删除", item.id);
						if (res.data.code = "1" && res.data && res) {
							console.log("删除成功");
							getData()
						}
					})
				} else if (but.cancel) {
					console.log('用户点击取消')

				}
			}
		})

	}

	function search(e) {
		query.name = e;
		query.page = 1;
		getData()
	}
	//显示ActionSheet
	function showActionSheet(items) {
		show5.value = !show5.value
		content.value = items.content
		title.value = items.title
		type.value = ("a" + items.type)
		id.value = items.id
		console.log('ActionSheet', items);
	}
	//新增
	function addReport() {
		show6.value = !show6.value
	}

	function addReports(newData) {
		console.log('newData', newData);
		value3.title = newData.title
		value3.content = newData.content.html
		value3.id = newData.id

		value3.type = newData.type.charAt(1)
		console.log("新增", value3);
		http.post("/zrReport/save", value3).then((res) => {
			console.log('正在保存', value3);
			if (res && res.data.code == "1") {
				console.log('保存成功', res);
				getData()
			}
			console.log(res);
		}).catch((re) => {
			loading.value = false;
			console.log(res)
		})
		close()
	}
	//以姓名查找
	function searchName() {
		loading.value = true;
		params.value.name = searchValue.value;
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}

		}).catch((re) => {
			loading.value = false;
		});
	}
	//总报告
	function getport() {
		http.post("/zrReport/getCount").then((res) => {
			port.day = res.data.data.dCount
			port.week = res.data.data.wCount
			port.season = res.data.data.sCount
			port.month = res.data.data.mCount
			port.year = res.data.data.yCount
			port.sum = res.data.data.tCount
			console.log('111111', res);
		}).catch((re) => {
			console.log(re)
		});
	}
	//选择部门
	function openDepart() {
		showRight.value.open();
		http.post("/depart/getAll").then((res) => {
			if (res && res.data && res.data.code == 1) {
				roomTreeData.value = res.data.data;
			}
		}).catch((re) => {
			console.log(re)
		});
	}
	//设置弹出框内容
	function listClick(mas) {
		console.log(mas);

	}
	//判断勾选数据
	function handleTreeChange(allSelectedKeys, currentItem) {
		allsubmitkeys.value = allSelectedKeys;
		console.log('handleTreeChange ==>', allSelectedKeys)
	}

	function closeDrawer() {
		loading.value = true;
		showRight.value.close();
		params.value.id = allsubmitkeys.value.join(",")
		http.post("/zrReport/table", params.value).then((res) => {
			console.log('发送请求成功！！！', res);
			if (res && res.data && res.data.code == 1) {
				console.log('接收数据成功！！！');
				list.data = res.data.rows;
				list.total = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}

	function dateChange(e) {
		console.log('e', e);
		query.startTime = (e[0] + " 00:00:00");
		query.endTime = (e[1] + " 00:00:00");
		// query.page = 1;
		// getData();
		http.post("/zrReport/table", query.value).then((res) => {
			console.log('发送请求成功！！！', res);
			if (res && res.data && res.data.code == 1) {
				console.log('接收数据成功！！！', res);
				list.data = res.data.rows;
				list.total = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}

	function pageChange(e) {
		current.value = e.current;
		query.page = e.current;
		getData();
	}
	//获取数据
	function getData() {
		http.post("/zrReport/table", query).then((res) => {
			console.log('res', res);
			list.data = res.data.rows
			list.total = res.data.total
			list.type = res.data.type
		})
	}

	function Malert() {
		console.log('1111')
		show4.value = true
	}
	//打开
	function open() {
		show3.value = true
		getData();
	}
	//关闭
	function close() {
		show3.value = false
		show5.value = false
		show6.value = false
	}
</script>
<style scoped>
	.Mcolor {
		background-color: white;
	}

	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.myRow {
		margin-top: 5px;
	}

	.datetimePicker {
		background-color: #fff;
	}

	.amount {
		/* border: 2px solid #d6d7d9; */
		padding: 5px;
		font-size: 13px;
	}

	.my-btn {
		width: 180rpx;
	}

	.content {
		margin: 20px 10px 20px 10px;
	}

	.chat-custom-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.ck {
		margin-top: 3px;
		color: #999;
		font-size: 11px;
		font-weight: normal;
	}

	.sn {
		color: #999;
		font-size: 11px;
		font-weight: normal;
		margin-right: 5px;
	}


	.note-container {
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 使用省略号来表示被隐藏的内容 */
		white-space: nowrap;
		/* 防止内容换行，保持在一行显示 */
	}
</style>